import React, { useState } from 'react';
import { Text, View, StyleSheet, ImageBackground, TextInput } from 'react-native';
import Btn from './Btn';
import '../global';
import { AntDesign } from '@expo/vector-icons';
const Login = () => {
    const [value, setValue] = useState('')
    return (
        <View style={styles.container}>
            <ImageBackground
                style={styles.bgImg}
                source={require('../assets/HomeworkFour/second.png')}
            >
                <View style={styles.box}>
                    <View style={styles.headerBox}>
                        <Text style={styles.login}>登录</Text>
                        <Text style={styles.logo}>E族之家服务平台</Text>
                    </View>
                    <View style={styles.contentBox}>
                        <View style={styles.content}>
                            <AntDesign name='user'
                                color={'#fff'} size={45}
                            />
                            <TextInput
                                style={styles.input}
                                placeholder='请输入您的手机号'
                                placeholderTextColor={'#fff'}
                                value={value}
                                onChangeText={(text) => setValue(text)}
                            />
                        </View>
                        <View style={styles.content}>
                            <AntDesign name='lock'
                                color={'#fff'} size={45}
                            />
                            <TextInput
                                style={styles.input}
                                placeholder='请输入您的密码'
                                placeholderTextColor={'#fff'}
                                value={value}
                                onChangeText={(text) => setValue(text)}
                            />
                        </View>
                    </View>
                    <View style={styles.btnBox}>
                        <View style={styles.boxBtn}>
                            <Btn
                                style={styles.btnLogin}
                                font={{ color: '#fff', fontSize: 20 }}
                            >登录</Btn>
                        </View>
                        <View style={styles.boxBtn}>
                            <Btn
                                style={styles.btnSubmit}
                                font={{ color: '#fff', fontSize: 20 }}
                            >注册</Btn>
                        </View>
                        <Btn
                            style={styles.password}
                            font={{ color: '#fff', fontSize: 15 }}
                        >忘记密码？</Btn>
                    </View>
                </View>
            </ImageBackground>

        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    bgImg: {
        width: w,
        height: h,
    },
    box:{
        backgroundColor: 'rgba(0,0,0,0.4)'
    },
    headerBox: {
        alignItems: 'center',
    },
    login: {
        marginTop: 0.03 * h,
        color: '#fff',
        fontSize: 25,
    },
    logo: {
        marginTop: 0.1 * h,
        color: '#fff',
        fontSize: 25,
    },
    contentBox: {
        marginTop: 0.1 * h,
    },
    content: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    input: {
        borderBottomWidth: 1,
        borderBottomColor: '#fff',
        margin: 20,
        height: 50,
        width: 300,
        fontSize: 20,
    },
    boxBtn: {
        marginTop: 0.03 * h,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnLogin: {
        width: 0.7 * w,
        height: 50,
        backgroundColor: 'red',
        borderRadius: 25
    },
    btnSubmit: {
        width: 0.7 * w,
        height: 50,
        borderWidth: 1,
        borderColor: '#fff',
        borderRadius: 25
    },
    password: {
        color: '#fff',
        marginTop: 0.02 * h,
    }
})
export default Login;
